<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>新增路径</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<link rel="stylesheet" href="../css/newCourse.css" />
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<script src="../js/axios.js"></script>
	<script src="../js/vue.js"></script>
	<script src="../js/jquery.min.js"></script>
	<script src="../js/popper.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
	<style>
		.app {
			float: left;
		}
	</style>

</head>

<body>
	<!--		<p>这里是添加页面页面</p>-->
	<!-- 一级容器，与其他框架（iframe , div）同级，装填以下div -->
	<div id="app" class="container-fluid app">


		<!-- 填写信息 -->
		<div class="course_info">

			<!--路径名称-->
			<div class="info_input">
				<div class="input_name">路径名称:</div>
				<div class="input_body">
					<input class="form-control col-5" type="text" v-model="name">
				</div>
			</div>
			<!--课程分类-->
			<div class="info_input">
				<div class="input_name">学习内容:</div>
				<div class="input_body">
					<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#addC">
						增加课程
					</button>
					<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#addR2">增加考试</button>
				</div>
			</div>
			<!-- 所选的课程考试列表 -->
			<table class="table table-bordered" style="width: 70%; height: 20px;">
				<thead>
					<tr>
						<th>序号</th>
						<th>名称</th>
						<th>类型</th>
						<th>操作</th>
					</tr>

				</thead>
				<tbody>
					<tr v-for="routeDetail in routeDetails">
						<td>{{routeDetail.orderno}}</td>
						<td>{{routeDetail.name}}</td>
						<td>{{routeDetail.styleName}}</td>
						<td>
							<button v-if="routeDetail.orderno !=1 " @click="up(routeDetail.orderno)" class="btn btn-warning btn-sm">上移</button>
							<button v-if="routeDetail.orderno !=rsize" @click="down(routeDetail.orderno)" class="btn btn-warning btn-sm">下移</button>
							<button @click="del(routeDetail.orderno)" class="btn  btn-danger btn-sm">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- 认证证书 -->
			<div class="info_input">
				<div class="input_name">认证证书:</div>
				<div class="input_body">
					<select class="form-control col-5" v-model="selected" @change="show">
						<option :value="certificate.id" v-for="certificate in certificates">{{certificate.name}}
						</option>
					</select>
				</div>
			</div>
			<!--闯关模式-->
			<div class="info_input">
				<el-switch v-model="gonext" inactive-text="闯关模式">
				</el-switch>
			</div>

			<!--路径简介-->
			<div class="info_input input_lg">
				<div class="input_name">路径描述:</div>
				<div class="input_body">
					<textarea class="form-control col-5" rows="3" v-model="description"></textarea>
				</div>

			</div>
			<button class="btn btn-primary" style="margin-left: 85px;" @click="add">提交</button>
		</div>
		<!-- 增加课程模态框（Modal） -->
		<div class="modal fade" id="addC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content" style="width: 800px;">
					<div class="modal-header">
						增加一门课程
					</div>
					<div class="modal-body">
						<template>
							<el-table :data="courses" stripe style="width: 100%" v-loading="cLoading">
								<el-table-column prop="cname" label="课程名字" width="180">
								</el-table-column>
								<el-table-column prop="description" label="课程简介" width="180">
								</el-table-column>
								<el-table-column prop="categoryName" label="课程类别" width="180">
								</el-table-column>
								<el-table-column prop="teacherName" label="讲师" >
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<el-button
												size="mini" type="success" @click="addCourse(scope.row)">添加
										</el-button>

									</template>
								</el-table-column>
							</el-table>
							<div class="block">

								<el-pagination
										@size-change="handleSizeChange2"
										@current-change="handleCurrentChange2"
										:current-page="cpage"
										:page-sizes="[5,10,15,20]"
										:page-size="cpageSize"
										layout="total, sizes, prev, pager, next, jumper"
										:total="ctotalNums">
								</el-pagination>
							</div>
						</template>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>

					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->

		</div>

		<!-- 增加考试模态框（Modal） -->
		<div class="modal fade" id="addR2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content" style="width: 800px;">
					<div class="modal-header">
						增加一门考试
					</div>
					<div class="modal-body">
						<template>
							<el-table :data="exams" stripe style="width: 100%" v-loading="eLoading">
								<el-table-column prop="name" label="考试名字" width="180">
								</el-table-column>
								<el-table-column prop="beginTime" label="考试开始时间" width="180">
								</el-table-column>
								<el-table-column prop="endTime" label="考试结束时间" width="180">
								</el-table-column>
								<el-table-column prop="paperStructure.questionTotalScore" label="总分" >
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<el-button
												size="mini" type="success" @click="addExam(scope.row)">添加
										</el-button>

									</template>
								</el-table-column>
							</el-table>
							<div class="block">

								<el-pagination
										@size-change="handleSizeChange"
										@current-change="handleCurrentChange"
										:current-page="epage"
										:page-sizes="[5,10,15,20]"
										:page-size="epageSize"
										layout="total, sizes, prev, pager, next, jumper"
										:total="etotalNums">
								</el-pagination>
							</div>
						</template>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" >关闭
						</button>

					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	</div>







	<script>

		new Vue({
			el: "#app",
			data() {
				return {
					certificates: [{ "id": 1, "name": "1123" }, { "id": 2, "name": "1123" }, { "id": 3, "name": "1123" }],
					name: "",
					courses: [],
					exams: [],
					selected: 0,
					description: "",
					gonext: true,
					style: "1",
					routeDetails: [],
					rsize: 0,
					cpageSize:5,
					cpage:1,
					ctotalpage:0,
					storage:undefined,
					token:"",
					refreshToken:"",
					epage:1,
					epageSize:5,
					etotalNums:0,
					ctotalNums:0,
					cLoading:true,
					eLoading:true


				}
			},
			created() {
				this.getToken()
				this.findCourses();
				this.findExams();
				this.findCertificates();

			},
			methods: {
				getToken:function(){
					this.storage=window.localStorage;
					this.token=this.storage.getItem("token");
					this.refreshToken=this.storage.getItem("refreshToken");
				},
				findCourses: function () {
					this.cLoading=true;
					let data= {
						"index": this.cpage,
						"pageSize": this.cpageSize
					}
					axios.post("/learnmap/findCourses",data,{
						headers:{
							'Content-Type': 'application/json;charset=UTF-8',
							"token":this.token,
							"refreshToken":this.refreshToken
						}
					}).then(res => {
						if (res.data.code == 200) {
							this.cLoading=false;
							this.courses=res.data.data.data;
							this.ctotalNums=res.data.data.totalNum;
						}
					})
				},
				findExams: function () {
					this.eLoading=true;
					let data={
						"pageNum":this.epage,
						"pageSize":this.epageSize
					}
					axios.post("/learnmap/findExams",data,{
						headers:{
							'Content-Type': 'application/json;charset=UTF-8',
							"token":this.token,
							"refreshToken":this.refreshToken
						}
					}).then(res => {
						if(res.data.code == 200){
							this.eLoading=false;
							this.exams=res.data.data.list;
							this.etotalNums=res.data.data.total;
						}
					})
				},
				findCertificates: function () {
					axios.get("/learnmap/findAllCertificates").then(res => {
						if (res.data.code == 200) {
							this.certificates = res.data.data;
						}
					})
				},
				add: function () {
					if (this.gonext) {
						this.style = "1";
					} else {
						this.style = "2";
					}
					let data= {
						"name": this.name,
						"description": this.description,
						"style": this.style,
						"routeDetails": this.routeDetails,
						"certificateid": this.selected
					}
					axios.post("/learnmap/addRoute",data,{
						headers:{
							'Content-Type': 'application/json;charset=UTF-8',
							"token":this.token,
							"refreshToken":this.refreshToken
						}
					}).then(res=>{
						if(res.data.code==200){
							this.$message({
								message: '成功增加新的路径',
								type: 'success'
							});
						}else if(res.data.code ==114){
							this.$message({
								message: '该路径名已被使用，请更换',
								type: 'warning'
							});
						}else if(res.data.code ==121){
							this.$message({
								message: '该学习组成已被其他路径使用，请更换',
								type: 'warning'
							});
						}else{
							this.$message({
								message: '系统维护中',
								type: 'error'
							});
						}
					})

				},
				show: function () {

				},
				addCourse: function (course) {
					var orderno = this.rsize + 1;
					var routeDetail = { "orderno": orderno, "name": course.cname, "style": "1", "styleName": "课程", "rid": course.cid };
					this.rsize = this.rsize + 1;
					this.routeDetails.push(routeDetail);
				},
				addExam:function(exam){
					var orderno = this.rsize + 1;
					var routeDetail = { "orderno": orderno, "name": exam.name, "style": "2", "styleName": "考试", "rid": exam.id };
					this.rsize = this.rsize + 1;
					this.routeDetails.push(routeDetail);
				},
				down: function (index) {
					let cindex = index - 1;
					let corderno = this.routeDetails[cindex].orderno;
					this.routeDetails[cindex].orderno = this.routeDetails[index].orderno;
					this.routeDetails[index].orderno = corderno;
					let arr = this.routeDetails;
					[arr[cindex], arr[index]] = [arr[index], arr[cindex]];
					this.routeDetails = arr;

				},
				up: function (index) {
					let uindex = index - 2;
					let cindex = index - 1;
					let corderno = this.routeDetails[cindex].orderno;
					this.routeDetails[cindex].orderno = this.routeDetails[uindex].orderno;
					this.routeDetails[uindex].orderno = corderno;
					let arr = this.routeDetails;
					[arr[uindex], arr[cindex]] = [arr[cindex], arr[uindex]];
					this.routeDetails = arr;

				},
				del: function (index) {
					let that = this;
					let cindex = index - 1;
					for (i = index; i < this.rsize; i++) {
						let orderno = this.routeDetails[i].orderno;
						this.routeDetails[i].orderno = orderno - 1;
					}
					this.routeDetails.splice(cindex, 1);
					this.rsize = this.rsize - 1;
				},
				handleCurrentChange: function (page) {
					this.epage = page;
					this.findExams();
				},
				handleSizeChange: function (pageSize) {
					this.epageSize = pageSize;

					this.findExams();
				},
				handleCurrentChange2: function (page) {
					this.cpage = page;
					this.findCourses();
				},
				handleSizeChange2: function (pageSize) {
					this.cpageSize = pageSize;

					this.findCourses();
				},
				findCertificates:function(){
					axios.get("/learnmap/findAllCertificates",{
						headers:{
							'Content-Type': 'application/json;charset=UTF-8',
							"token":this.token,
							"refreshToken":this.refreshToken
						}
					}).then(res=>{
						if(res.data.code ==200){
							this.certificates=res.data.data
						}
					})
				}
			}
		})
	</script>
</body>

</html>